<template>
  <div style="margin: 15px;border-color: aliceblue;border-image: round;">
    <el-card class="task_card" shadow="hover" @click="testUpdate">
      <div style="float: right">
<!--        stop阻止事件往上层继续传播-->
        <delete style="width: 1em; height: 1em;" @click.stop="testDel"/>
      </div>
      <div style="font-size: small;margin-bottom: 10px">
        {{ flightTask.flightTaskName }}
      </div>
      <div style="font-size: xx-small">
        创建时间：{{ this.moment(flightTask.createTime).format("YYYY-MM-DD")}}
      </div>
      <div style="font-size: xx-small">
        修改时间：{{ this.moment(flightTask.updateTime).format("YYYY-MM-DD") }}
      </div>
    </el-card>
  </div>
</template>

<script>
import {Delete} from '@element-plus/icons-vue'
import moment from 'moment'
import request from "@/utils/request"
import { ElMessageBox ,ElMessage} from 'element-plus'
export default {
  components:{Delete},
  props:{
    initFlightTask:Object
  },
  data(){
    return{
      store:this.$store,
      flightTask:this.initFlightTask,
      moment:moment,
      polyEditor:{},
      polyline:{}
    }
  },
  name: "TaskCard",
  methods:{
    testDel:function (){
      let user = JSON.parse(sessionStorage.getItem("user"));
      if(user.permission===2){
        alert("您没有权限！");
        return;
      }
      ElMessageBox.confirm(
          '是否删除该任务?',
          '警告',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
          }
      ).then(() => {
        request.get("/flight_task/delete/"+this.flightTask.flightTaskId).then(res=>{
          ElMessage({
            type: 'info',
            message: res.data.msg,
          });
          request.get("/flight_task/list").
          then(res=>{
            if(res){
              //console.log(res.data);
              this.store.commit('updateFlightTasks',res.data);
            }else {
              console.log("请求飞行任务资源失败")
            }
          });
        })

      }).catch(() => {
          ElMessage({
            type: 'info',
            message: '删除取消',
          })
      })
      //console.log(JSON.parse(this.flightTask.routePoints));
      //request.get("/flight_task/delete/"+this.flightTask.flightTaskId);
    },
    testUpdate:function (){
      //TODO...:点击航线任务时，地图终点设置为航线起点
      this.store.commit('setIsUpdateRL',true);
      this.store.commit('rightAsideOnAndOff',true);
      this.store.commit('taskListViewOnAndOff',false);
      this.store.commit('updateTaskButtonOnAndOff',true);
      this.store.commit('createTaskButtonOnAndOff',false);
      //获取折现编辑器和折线包装器
      this.polyEditor = this.store.state.polyEditor;
      this.polyline = this.store.state.polyline;
      //填充数据
      //默认高度，默认速度,名字，创建时间，修改时间

      this.store.commit('setCurrentFlightTask',{
        flightTaskId:this.flightTask.flightTaskId,
        flightTaskName:this.flightTask.flightTaskName,
        defaultVelocity:this.flightTask.defaultVelocity,
        defaultHeight:this.flightTask.defaultHeight,
        createTime:this.flightTask.createTime,
        updateTime:this.flightTask.updateTime
      });
      // currentPath:[],currentHeight:[],currentVelocity:[],
      let routePoints = JSON.parse(this.flightTask.routePoints);
      let currentPath = [];
      let currentHeight = [];
      let currentVelocity = [];
      for(let i=0;i<routePoints.length;i++){
        currentPath[i] = [routePoints[i].longitude,routePoints[i].latitude];
        currentVelocity[i] = routePoints[i].velocity;
        currentHeight[i] = routePoints[i].height;
      }
      this.store.commit('setCurrentHeight',currentHeight);
      this.store.commit('setCurrentVelocity',currentVelocity);
      this.store.commit('updateCurrentPath',currentPath);
      //配置开启折线和折线编辑器
      this.polyline.setPath(this.store.state.currentPath);
      this.polyEditor.setTarget(this.polyline);
      this.polyEditor.open();
      let map = this.store.state.map;
      let markers = map.getAllOverlays('marker');
      map.remove(markers);

    }
  }
}
</script>

<style scoped>
.task_card{
  background-color: dimgrey;
  color:white;
}
.task_card:hover{
  background-color: darkgrey;
}
</style>